<template>
  <div>
    <h1>测试</h1>
    <a href="#" class="btn btn-bubble"></a>
  </div>
</template>

<script>
export default {};
</script>

<style>
.btn-bubble {
  color: white;
  background-color: #77b11c;
  background-repeat: no-repeat;
}
.btn-bubble {
  -webkit-animation: bubbles 3s forwards linear infinite;
  animation: bubbles 3s both forwards infinite;
  background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      90% 90% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      23% 141% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      17% 90% / 0.68em 0.68em,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      15% 94% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      42% 126% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      102% 120% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      12% 121% / 0.67em 0.67em,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      69% 87% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      32% 99% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      84% 129% / .0625rem .0625rem,
    radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      40% 99% / 0.72em 0.72em,
      radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      40% 99% / .0625rem .0625rem,
      radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      40% 99% / 0.72em 0.72em,
      radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      40% 99% / 0.72em 0.72em,
      radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 30%,
        #eeeeff 60%,
        #eeeeff 65%,
        rgba(0, 0, 0, 0) 70%
      )
      40% 99% / 0.72em 0.72em;
  background-color: #77b11c;
  background-repeat: no-repeat;
}

@-webkit-keyframes bubbles {
  100% {
    /* background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%,
      110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%; */
    /* box-shadow: inset 0 -6.5em 0 #0072c4; */
  }
}

@keyframes bubbles {
  100% {
    /* background-position: 92% -220%, 31% -185%, 24% 6%, 16% -328%, 39% -366%,
      110% -375%, 5% -60%, 59% -365%, 41% -363%, 82% -8%, 37% -224%; */
    /* box-shadow: inset 0 -6.5em 0 #0072c4; */
    background-position:  -5%  -2%, -2% 2%, 25% 0%, 5%  2%, 5%  2%, 125%  2%, 5%  2%,-65%  -32%;
  }
}
/* body {
  background: #10192d;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-content: center;
  align-items: center;
} */

.btn {
  display: inline-block;
  text-decoration: none;
  width: 20rem;
  height: 1.375rem;
}
</style>